<template>
  <div class="login">
    <div class="login-panel">
      <!-- header -->
      <nav-header></nav-header>
      <!-- form -->
      <el-form
        :model="loginForm"
        :rules="loginRules"
        ref="loginRef"
      >
        <el-form-item prop="account">
          <el-input
            v-model="loginForm.account"
            prefix-icon="iconfont icon-account"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="iconfont icon-password"
            :type="visible ? 'password' : 'text'"
            @keyup.native.enter="handleLogin"
          >
            <i
              @click="visible = !visible"
              slot="suffix"
              :class="[
                'iconfont',
                visible ? 'icon-eye-open' : 'icon-eye-close'
              ]"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="login-btn"
            type="primary"
            size="small"
            :loading="loading"
            @click="handleLogin"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import NavHeader from '@/components/NavHeader'
import { checkLogin } from '@/api/user.js'
// import storage from '@/utils/storage.js'
import { Message } from 'element-ui'
import { calcRoutes } from '@/router'
export default {
  data() {
    return {
      loginForm: {
        account: 'admin',
        password: '123456'
      },
      loginRules: {
        account: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ]
      },
      visible: true,
      loading: false
    }
  },
  methods: {
    handleLogin() {
      // console.log(this.loginForm)
      this.$refs.loginRef.validate((valid) => {
        // 开启加载效果
        this.loading = !this.loading
        // 验证通过了进入表达登录请求
        if (valid) {
          // console.log(1111)
          // 1. 发送网络请求返回 token
          checkLogin(this.loginForm)
            .then((res) => {
              console.log(res.role)
              // 存令牌
              this.$storage.setItem('token', res.token)
              // 存用户的权限
              this.$storage.setItem('role', res.role)
              calcRoutes()
              // return
              Message({
                type: 'success',
                message: '登录成功，即将跳转到首页',
                duration: 1000,
                onClose: () => {
                  // 跳转到首页
                  this.$router.push('/')
                  // this.$router.push('/')
                }
              })
              // 关闭加载效果
              this.loading = !this.loading
            })
            .catch(() => {
              this.loading = !this.loading
            })
          // 2. 跳转到首页 。。。
        } else {
          // 关闭加载效果
          this.loading = !this.loading
        }
      })
    }
  },
  components: {
    NavHeader
  }
}
</script>
<style lang="scss" scoped>
.login {
  height: 100%;
  background-image: url('../../assets/imgs/bg.jpg');
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-panel {
    min-width: 400px;
    height: 250px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 40px;
    border-radius: 8px;
    // 样式穿透 less sass
    ::v-deep .el-input__inner {
      background-color: transparent;
      color: #fff;
      letter-spacing: 2px;
      height: 32px;
    }

    .login-btn {
      width: 100%;
    }
  }
}
</style>
